<template>
  <rx-layout style="height: 100%">
    <div slot="center">
      <div style=" float:right;margin-right: 10px;margin-bottom: 15px;">
          <a-button type="primary" @click="downloadTemplate">{{i18n('form.downloadExcel','下载上传Excel模板')}}</a-button>
          <a-button type="danger" @click="cancel">{{$ti18('rxForm.closeBtn','关闭')}}</a-button>
      </div>
      <a-divider />
      <div style="margin-left: 20px; ">
        <div class="clearfix" style="position: relative;">
          <a-button type="primary"  @click="handleUpload" :disabled="fileList.length === 0" :loading="uploading" style="position: absolute; left: 120px;">
            {{uploading ? i18n('form.uploading','上传中') : i18n('form.startUpload','开始上传') }}
          </a-button>
          <a-upload :fileList="fileList" download="download" :multiple="false" :remove="handleRemove" :beforeUpload="beforeUpload" style="">
            <a-button>
              <a-icon type="upload" /> {{i18n('form.selectFile','选择文件')}} </a-button>
          </a-upload>
        </div>
      </div>
    </div>
  </rx-layout>
</template>

<script>
  import {Util, RxLayout,TokenUtil} from "@lowcode/jpaas-common-lib";
  import FormApi from '../api/FormApi.js';

  export default {
    name: "rx-sub-excel-import",
    components: {
      RxLayout
    },
    props: {
      layerid: String,
      lydata: Object,
      destroy: Function,
      fieldsConfig:Object,
      comment:String
    },
    data() {
      return {
        fileList:[],
        uploading: false,
      }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formJsComps", key);
        },
      cancel() {
        Util.closeWindow(this, "cancel");
      },
      beforeUpload(file) {
        if(this.fileList.length>0){
          this.$message.warning(i18n('msg.onlyOne','只能选择一个文件!'));
          return;
        }
        var type = (file.name).split(".")[1];
        if(type != "xls"&&type != "xlsx") {
          this.$message.warning(i18n('msg.onlyExcel','只能上传excel'));
          return false;
        }
        this.fileList = [...this.fileList, file];
        return false;
      },
      handleRemove(file) {
        const index = this.fileList.indexOf(file);
        const newFileList = this.fileList.slice();
        newFileList.splice(index, 1);
        this.fileList = newFileList;
      },
      handleUpload() {
        const {
          fileList
        } = this;
        if(fileList.length==0){
          this.$message.warning(i18n('msg.selectFile','请选择文件!'));
          return;
        }
        const formData = new FormData();
        for(var i = 0; i < fileList.length; i++) {
          formData.append('files', fileList[i]);
        }
        this.uploading = true;
        this.fileAdd(formData);
      },
      async fileAdd(formData) {
        let self = this;
        await FormApi.uploadExcel(formData,self.fieldsConfig.beginRow,self.fieldsConfig.sheetNo).then(res => {
          if(!res.success) return;
          self.fileList = [];
          self.uploading = false;
          Util.closeWindow(this, "ok",res.data);
        });
      },
      downloadTemplate(){
        var accessToken = TokenUtil.getToken();
        FormApi.downloadTemplate(this.fieldsConfig,this.comment,accessToken).then(res => {
            let blob = new Blob([res], {
              type: 'application/vnd.ms-excel'
            });
            let fileName = this.comment + this.i18n('form.subTableTemp','子表导入模板') + '.xlsx';
            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob, fileName);
            } else {
              var link = document.createElement('a');
              link.href = window.URL.createObjectURL(blob);
              link.download = fileName;
              link.click();
              //释放内存
              window.URL.revokeObjectURL(link.href)
            }
          });
      }
    }
  }
</script>

<style scoped>
  table tr.firstRow th {
    border-top-width: 1px;
    text-align: left;
    border: 1px solid #f2f2f2;
    background: #f8f8f8;
  }
</style>
